/**
 * webpack.config.js  webpack的配置文件
 *    作用: 指示 webpack 干哪些活 (当你运行webpack指令时, 会加载里面的配置)
 *
 *    所有构建工具都是基于nodejs平台运行. 模块化默认采用commonjs
 *
 */
const path = require('path')

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: "built.js",
    // 输出路径
    // __dirname nodejs的变量, 代表当前文件的目录绝对路径
    // 当前文件的目录: webpack.config.js 是当前文件, 所在目录 03.compile_package_....
    path: path.resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader的配置
      // 不同的文件必须配置不同的loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序: 从右到左, 从下到上, 依次执行
          // 创建style标签(<style>), 将js中的样式资源插入进去, 添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中, 里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        // 匹配less文件
        test: /\.less$/,
        use: [
          'style-loader',
          // 如果额外不添加css-loader的话, 只添加一个less-loader的话, 就会出现一下错误
          // error: You may need an additional loader to handle the result of these loaders.
          'css-loader',
          // 先利用less-loader将less解析成css, 然后用css解析成js字符串. 在通过style标签嵌入
          'less-loader'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development'
  // mode: 'production',
}
